<template>
    <div style="width:100%;height: 100%;background-color: #f4f7f8;">
        <div class="rescueIndex">
            <x-header header-background-color="#fff" :left-options="{showBack:false,preventGoBack:false}"  @on-click-back="GoBack">
                {{title}}
                <a slot="right" @click="GoDestory()">退出</a>
            </x-header>
            <div :class="{rescueIndex_content:bigHeight=='30vh',rescueIndex_content_single_map:bigHeight!='30vh'}">
                <div class="rescueIndex_content_map" >
                    <commonMap ref="CMap" :bigHeight="bigHeight" initName="pcontainer" @handle="mapHandle" />
                </div>
                <div v-show="bigHeight=='30vh'" class="rescueIndex_content_menu">
                    <div class="rescueIndex_content_menu_lists clearfix">
                        <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('回传视频')">
                            <img src="../../assets/images/participateRescue/huichuanshi.png"/>
                            <span>
                                回传视频
                            </span>
                        </div>
                        <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('回传照片')">
                            <img src="../../assets/images/participateRescue/huizhao.png"/>
                            <span>
                                回传照片
                            </span>
                        </div>
                        <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('一键告警')">
                            <img src="../../assets/images/participateRescue/jinggao.png"/>
                            <span>
                                一键告警
                            </span>
                        </div>
                        <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('实时视频')">
                            <img src="../../assets/images/participateRescue/shishipin.png"/>
                            <span>
                                实时视频
                            </span>
                        </div>
                        <div v-if="menuDown">
                            <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('出动信息')">
                                <img src="../../assets/images/participateRescue/buchong.png"/>
                                <span>
                                    出动信息
                                </span>
                            </div>
                            <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('物资需求')">
                                <img src="../../assets/images/participateRescue/wuzi.png"/>
                                <span>
                                    物资需求
                                </span>
                            </div>
                            <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('增援需求')">
                                <img src="../../assets/images/participateRescue/zengyuan.png"/>
                                <span>
                                    增援需求
                                </span>
                            </div>
                            <div class="rescueIndex_content_menu_lists_a" @click="menuAndroid('一张图')">
                                <img src="../../assets/images/participateRescue/yizhangtu.png"/>
                                <span>
                                    一张图
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="rescueIndex_content_menu_click" @click="menuDown=!menuDown">
                        <img v-if="!menuDown" src="../../assets/images/participateRescue/bot.png"/>
                        <img v-else src="../../assets/images/participateRescue/top.png"/>
                        {{menuDown?"收缩":"展开"}}
                    </div>
                </div>
                <div v-show="bigHeight=='30vh'" class="rescueIndex_content_report" @click="feedbackModelClick">
                    一键反馈
                </div>
                <div v-show="bigHeight=='30vh'&&taskList.length>0" class="rescueIndex_content_task">
                    <div class="rescueIndex_content_task_lists"  @click="openInfo(item)" v-for="(item,index) in taskList" :key="index">
                        <div class="rescueIndex_content_task_list_top clearfix">
                            <div>
                                 {{item.org_name}}
                            </div>
                            <div>
                                <span :class="{'jieshu':item.flagname=='已结束'}">
                                    {{item.flagname}}
                                </span>
                                <span v-if="item.flagname!='已结束'">
                                    {{item.tasklevelname}}
                                </span>
                            </div>
                        </div>
                        <div class="rescueIndex_content_task_list_mid">
                            {{item.taskcontent}}
                        </div>
                        <div class="rescueIndex_content_task_list_bor clearfix">
                            <div>
                                {{item.sendtime}}
                            </div>
                            <div @click.stop="commitfeedback(item)" >
                                <img src="../../assets/images/participateRescue/tianjia.png"/>
                                添加反馈
                            </div>
                        </div>
                    </div>
                    <div class="rescueIndex_content_task_more">
                        <span @click="taskMore">
                            更多任务
                        </span>
                    </div>
                </div>
            </div>
            <div v-show="bigHeight=='30vh'" class="rescueIndex_botNab clearfix">
                <div @click="menuAndroid('通话组')">
                    <img src="../../assets/images/participateRescue/tonghua.png"/>
                    <span>
                        通话组
                    </span>
                </div>
                <div @click="menuAndroid('通讯录')">
                    <img src="../../assets/images/participateRescue/tongxun.png"/>
                    <span>
                        通讯录
                    </span>
                </div>
                <div @click="menuAndroid('我的')">
                    <img src="../../assets/images/participateRescue/myBj.png"/>
                    <span>
                        我的
                    </span>
                </div>
            </div>
        </div>
        <popup v-if="taskModel" v-model="taskModel" height="100%" width="100%" position="right">
            <taskDetails :param="taskModelParam" @close="closeInfo"/>
        </popup>
        <popup v-if="commitfeedbackModel" v-model="commitfeedbackModel" height="100%" width="100%" position="right">
            <commitfeedback :taskId="taskid" @close="closeInfo" @success="requestData"/>
        </popup>
        <popup v-if="taskListModel" v-model="taskListModel" height="100%" width="100%" position="right">
            <taskList :refid="eventid"  @close="closeInfo"/>
        </popup>
        <popup v-if="feedbackModel" v-model="feedbackModel" height="100%" width="100%" position="right">
            <feedback :refid="eventid"  @close="closeInfo"/>
        </popup>
        <popup v-if="bigMapModel" v-model="bigMapModel" height="100%" width="100%" position="right">
            <bigMap :resultMap="resultMap"  @close="closeInfo"/>
        </popup>
        <popup v-if="eventModel" v-model="eventModel" height="100%" width="100%" position="right">
            <eventInfo  :itemObj="curreventInfo" @close="closeInfo"/>
        </popup>
        <popup v-if="replenishModel" v-model="replenishModel" height="100%" width="100%" position="right" style="    overflow-x: hidden;">
            <formElement :flagTrue="false" :refid="eventid"  @close="closeInfo"/>
        </popup>
        <popup v-if="resurceModel" v-model="resurceModel" height="100%" width="100%" position="right" style="    overflow-x: hidden;">
            <needResurce :refid="eventid"  @close="closeInfo"/>
        </popup>
        <popup v-if="reinforceDemandModel" v-model="reinforceDemandModel" height="100%" width="100%" position="right" style="    overflow-x: hidden;">
            <reinforceDemand :refid="eventid"  @close="closeInfo"/>
        </popup>
    </div>
</template>
 
<script>
import {XHeader,Popup} from 'vux'
import commitfeedback from "../taskList/commitfeedback";
import taskDetails from "../taskList/taskDetails.vue";
import taskList from "../taskList/taskList";
import feedback from "../event/feedback";
import commonMap from "../commons/commonMap";
import eventInfo from "../event/eventInfo";
import formElement from "../registration/formElement";
import needResurce from "../needResurce/needResurce";
import reinforceDemand from "../needResurce/reinforceDemand";
import bigMap from "./bigMap";
import { taskListAjaxData,getDatafindEvent } from '@/assets/js/service'
import Vue from 'vue';

export default {
  components: {
    XHeader,
    Popup,
    taskDetails,
    commitfeedback,
    taskList,
    feedback,
    commonMap,
    bigMap,
    eventInfo,
    formElement,
    needResurce,
    reinforceDemand
  },
  data () {
    return {
        title:'6.12 汶川地震',
        menuDown:false,//菜单展开
         // 分页
        refreshing: false,
        loading: false,
        currentindex:1,
        // 分页end
        taskList:[],
        eventid:'',//事件id
        taskModel:false,//任务详情
        commitfeedbackModel:false,//新增反馈
        taskListModel:false,//更多任务
        feedbackModel:false,//现场反馈
        bigMapModel:false,//全屏
        eventModel:false,//事件详情
        replenishModel:false,//补充出动情况
        resultMap:{},
        currLocation:"",
        curreventInfo:{},
        eventLonlat:"",//事发地点 保存事发地点android请求到坐标规划路线
        teamIcon:require("../../assets/images/icon/dzrescue.png"),
        currItem:{},//当前救援队的基本信息
        bigHeight:"30vh",
        resurceModel:false,//需求上报页面
        reinforceDemandModel:false,//增援需求
    }
  },
  created(){
    console.log("home load")
    this.$vux.loading.show({
        text: '加载中'
    });
    if(this.$route.query.eventid){
        this.$store.state.eventId = this.$route.query.eventid;
    }
    this.eventid=this.$store.state.eventId;
    this.requestData();
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
    
  },
  mounted(){
      console.log("page load success")
      window.locationSet=this.locationSet;
     
     //this.$refs.CMap.locationSet("93.796409_31.897525_四川省雅安市拉亚镇桑木卡",require("../../assets/images/icon/dzrescue.png"),{})
    this.requestDataForEventInfo();
    this.refreshLocation();
    window.GoBack=this.GoDestory;//安卓调用GoBack（手机back键返回问题）
  },
  methods: {
    //****************lmc bigin**************************** */
    mapHandle(item){
        console.log("处理");
        let _this=this;
        let opentype=item.opentype;
        console.log(item)
        switch (opentype) {
            case 'allpx':
                console.log("点击全屏")
                //_this.bigMapModel=true;
                if(_this.bigHeight=="30vh"){
                    _this.bigHeight="85vh";
                }else{
                     _this.bigHeight="30vh";
                }
                break;
            case 'event_info':
                console.log("事件详情")
                this.eventModel=true;
                //sessionStorage.setItem("eventInfo",JSON.stringify(_this.curreventInfo))
                //_this.$router.push("/eventInfo")
                break;
            case 'checkIn':
                console.log("登记");
                _this.$router.push({"path":"/formElement","query":{"refid":_this.eventid}})
                break;
            default:
                break;
        }
    },
    refreshLocation(){
       if(this.$isAndroid()){
          console.log("invoking android!")
          window.android.getCurrentLocation();
        }else{
          this.locationSet("93.793409_31.896125_四川省雅安市拉亚镇桑木卡")
        }
    },
    locationSet(locationStr){
        this.currLocation=locationStr;
        this.currItem.isCurrent=true;//添加是否是当前出动的救援队信息 如果是在地图页面判断计算路程时间
        console.log("定位成功")
        console.log(this.currItem)
        this.$refs.CMap.locationSet(locationStr,this.teamIcon,this.currItem);
         //规划路线
        this.$refs.CMap.navigationLine(this.eventLonlat,locationStr,this.currItem)
    },
    GoDestory(){
        let _this=this;
        this.$vux.confirm.show({
            title: '提示',
            content: '退出救援模式后，您可通过首页重新进入',
            onShow () {
                console.log('plugin show')
            },
            onHide () {
                console.log('plugin hide')
            },
            onCancel () {
                console.log('plugin cancel')
            },
            onConfirm () {
                console.log('plugin confirm')
                if(_this.$isAndroid()){
                    window.android.destory();
                }else{
                    _this.$showBottomToast("退出系统")
                }
            }
        })
    },
    requestDataForEventInfo(){
        let _this=this;
        let param={"eventid":_this.$store.state.eventId,"orgcode":_this.$store.state.user.orgcode};
        getDatafindEvent(param,function(res){
            console.log("getDatafindEvent==>",res);
            if(res.status=='200'){
                let dataObj=res.data;
                console.log(dataObj)
                _this.curreventInfo=dataObj;
                _this.$refs.CMap.changeNotification(dataObj.dispatchcaseflag)
                _this.$refs.CMap.setEventObj(dataObj);
                _this.title=dataObj.eventtitle;
                _this.eventLonlat=dataObj.longitude+"_"+dataObj.latitude+"_"+dataObj.eventaddress;
                //灾害地点赋值
                _this.$refs.CMap.locationSet( _this.eventLonlat,require("../../assets/images/icon/dzzh.png"),dataObj);
                if(dataObj.disList&&dataObj.disList.length>0){
                    
                    dataObj.disList.forEach((item,index)=>{
                        if(item.orgcode!=_this.$store.state.user.orgcode){
                             let teamLonlat=item.longitude+"_"+item.latitude+"_"+item.address;
                            //灾害地点赋值
                            _this.$refs.CMap.locationSet(teamLonlat,require("../../assets/images/icon/firstrescue.png"),item);
                            console.log( _this.eventLonlat,teamLonlat)
                            //规划路线
                            _this.$refs.CMap.navigationLine(_this.eventLonlat,teamLonlat)
                            console.log(item)
                        }else{
                            //当前救援队信息
                            console.log("current team setValue success!!")
                            _this.currItem=item;
                        }
                       
                    })
                }
                
            }else{
                 _this.$refs.CMap.changeNotification("0")
            }
        })
    },
    //********************lmc end*********************** */
    requestData(){//任务列表请求
        let _this=this;
        let user=_this.$store.state.user;
        if(user){
            let param={
                "userid":_this.$store.state.user.userid,
                "orgcode":_this.$store.state.user.orgcode,
                "teamid":_this.$store.state.user.teamid,
                "eventid":_this.$store.state.eventId,
                "pageNo":_this.currentindex,
                "pageSize":2
            };

            taskListAjaxData(param,function(res){
                _this.loading = false;
                _this.refreshing = false;
                if(res.status=='200'){
                    if(_this.currentindex==1){
                        _this.taskList=res.data;
                    }else{
                        if(res.data&&res.data.length>0){
                            res.data.forEach((item,index)=>{
                                console.log(item);
                                _this.taskList.push(item);
                            })
                        }
                    }
                    _this.$vux.loading.hide();
                }
                console.log("res==>",res)
            })
        }else{
            _this.$showBottomToast("获取用户信息失败！ 请重新登录")
        }
    },
    openInfo(_item){//任务跳转详情
        let _this=this;
        console.log(_item)
        _this.taskModel=true;
        this.taskModelParam=_item.taskid;
    },	
    commitfeedback(item){//新增反馈
        this.taskid=item.taskid;
        this.commitfeedbackModel=true;
    },
    taskMore(){//更多任务
        this.taskListModel=true;
    },
    feedbackModelClick(){//一键反馈
        this.feedbackModel=true;
    },
    menuAndroid(item){//安卓菜单
        switch (item) {
            case "一键告警":
                window.android.emergencyReport();
                break;
            case "实时视频":
                window.android.playRealtimeVide();
                break;
            case "回传视频":
                window.android.starVideoPush();
                break;
            case "通话组":
                window.android.openTGroupPage();
                break;
            case "通讯录":
                window.android.openVideoContactsPage();
                break;
            case "我的":
                // this.$showBottomToast(item);
                window.android.startMineActivity();
                break;
            case "回传照片":
                // this.$showBottomToast(item);
                window.android.openReportPhotos()
                break;
            case "出动信息":
                // this.$showBottomToast(item);
                this.replenishModel=true;
                break;
            case "物资需求":
                this.resurceModel=true;
                // this.$showBottomToast(item);
                break;
            case "增援需求":
                // this.$showBottomToast(item);
                this.reinforceDemandModel=true;
                break;
            case "一张图":
                // this.$showBottomToast(item);
                window.android.startMapActivity()
                break;
        
            default:
                break;
        }
    },
    closeInfo(){//详情页面点击返回的方法
        this.taskModel=false;
        this.commitfeedbackModel=false;
        this.taskListModel=false;
        this.feedbackModel=false;
        this.bigMapModel=false;
        this.eventModel=false;
        this.replenishModel=false;
        this.resurceModel=false;
        this.reinforceDemandModel=false;
        window.GoBack=this.GoDestory;//安卓调用GoBack（手机back键返回问题）   
    },
    GoBack(){
        this.$closeStates();
        // this.$emit("close")
    },

  }
}
</script>
 
<style lang="less" scoped>
.rescueIndex{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .rescueIndex_content_single_map{
        width: 100%;
        height:calc( 100% - 46px );
    }
    .rescueIndex_content{
        width: 100%;
        height:calc( 100% - 46px - .97rem );
        // background-color: #fff;
        overflow: auto;
        .rescueIndex_content_map{
            width: 100%;
            height: 35vh;
            overflow: hidden;
        }
        .rescueIndex_content_menu{
            width: 100%;
            background-color: #fff;
            margin-top: .2rem;
            .rescueIndex_content_menu_lists{
                width: 100%;
                .rescueIndex_content_menu_lists_a{
                    width: calc(100% / 4);
                    display: flex;
                    float: left;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding: .3rem 0 0;
                    img{
                        height: .7rem;
                        margin-bottom: 10px;
                    }
                    span{
                        color: #333333;
                        font-size: .25rem
                    }
                }
            }
            .rescueIndex_content_menu_click{
                width: 100%;
                display: flex;
                justify-content: center;
                padding: .3rem 0 .2rem;
                color: #409eff;
                font-size: .2rem;
                align-items: center;
                img{
                    height: .22rem;
                    margin-right: 10px;
                }
            }
        }
        .rescueIndex_content_report{
            background-color: #409eff;
            height: .72rem;
            border-radius: 8px;
            width: calc(100% - .4rem);
            margin: .2rem;
            text-align: center;
            line-height: .72rem;
            color: #fff;
            font-size: .28rem;
            letter-spacing: 1px;
        }
        .rescueIndex_content_task{
            .rescueIndex_content_task_lists{
                background-color: #fff;
                padding: 15px 20px;
                margin-bottom: 15px;
                .rescueIndex_content_task_list_top{
                    div:nth-child(1){
                        float: left;
                        font-size: .28rem;
                        position: relative;
                    }
                    div:nth-child(1)::after{
                        position: absolute;
                        left: -10px;
                        content: "";
                        width: .08rem;
                        height: .3rem;
                        top: 3px;
                        border-radius: 4px;
                        border: solid 1px #409eff;
                        background-color: #39b5f9;
                    }
                    div:nth-child(2){
                        float: right;
                        span{
                            border-radius: .2rem;
                            letter-spacing: 0;
                            color: #fff;
                            width: .9rem;
                            height: .4rem;
                            line-height: .4rem;
                            font-size: .2rem;
                            float: left;
                            text-align: center;
                        }
                        span:nth-child(1){
                            margin-right: 5px;
                            background-color: #ad5da1;
                        }
                        span:nth-child(2){
                            background-color: #fe2500;
                        }
                        span.jieshu{
                            background-color: #d2d2d2;
                        }
                    }
                }
                .rescueIndex_content_task_list_mid{
                    letter-spacing: 0;
                    color: #666;
                    line-height: .4rem;
                    margin: .18rem 0;
                    font-size: .24rem;
                    height: .8rem;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: break-all;
                }
                .rescueIndex_content_task_list_bor{
                    height: .4rem;
                    div:nth-child(1){
                        float: left;
                        color: #888888;
                        line-height: .4rem;
                        font-size: .18rem;
                    }
                    div:nth-child(2){
                        float: right;
                        width: 1.48rem;
                        height: .4rem;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        color: #fefefe;
                        font-size: .2rem;
                        border-radius: 4px;
                        background-color: #409eff;
                        img{
                            height: .2rem;
                            margin-right: 5px;
                        }
                    }
                }
            }
            .rescueIndex_content_task_more{
                width: 100%;
                text-align: center;
                height: .7rem;
                margin-top: -15px;
                span{
                    color: #409eff;
                    padding: 5px;
                    font-size: .22rem;
                    line-height: .7rem;
                }
            }
        }
    }
    .rescueIndex_botNab{
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        height: .97rem;
        div{
            width: calc(100% / 3);
            float: left;
            padding: .15rem 0 0;
            font-size: .18rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img{
                height: .35rem;
                margin-bottom: 6px;
            }
        }
    }
}
</style>